<template>
	<view class="container">
		<map name="" style="width: 100%; height: 1600rpx;" 
		:latitude="lat" 
		:longitude="lon"
		 :markers="markers"
		 show-location="true"></map>
		<view class="map">
			<view class="bottom">
				<text @click="tonxt">景区列表</text>
				<text @click="PagetoYouLan">游览线路</text>
				<text @tap="PagetoZhouBian">周边服务</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/*
				经纬度：118.107467,24.565092
				度分秒格式：东经118°6'26.881",北纬24°33'54.331"
				地址：福建省厦门市集美区鳌园路22号
				详情请访问：http://jingweidu.757dy.com/share?xy=118.113938,24.571135
				*/
				key:'VVSBZ-U2X3Z-TMIXY-Z6BF2-62RBT-ENBTZ',
				city:'厦门市集美学鳌园路24号',
				lat:0,
				lon:0,
			};
		},
		onLoad() {
			uni.request({
				url:'https://apis.map.qq.com/ws/geocoder/v1/?address='+this.city+'&key='+this.key,
				success :res=> {
					this.lat=res.data.result.location.lat
					this.lon=res.data.result.location.lng
				}
			})
		},
		methods:{
			PagetoZhouBian(){
				uni.navigateTo({
					url:'/pages/sousuo/zhoubian'
				})
			},
			tonxt(){
				uni.navigateTo({
					url:'/pages/sousuo/map-list?lat='+this.lat+'&lon='+this.lon
				})
			},
			PagetoYouLan(){
				uni.navigateTo({
					url:'/pages/sousuo/youlan'
				})
			}
		}
	}
</script>

<style lang="scss">
.container{
	.map{
		.bottom{
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: #fff;
			width: 600rpx;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
		}
		display: flex;
		justify-content: center;
		background-color: gray;
		height: 100vh;
		width: 100vw;
	}
}
</style>
